<script setup lang="ts" name="404">
const images = reactive({
  successImg: new URL("@/assets/images/Home/success.png", import.meta.url).href,
});
const data: any = reactive({
  currenctIndex: 0,
  activeNames: [1],
  showSuccessToast:false
});

const { currenctIndex, activeNames,showSuccessToast } = toRefs(data);
const handleTime = (index: number) => {
  currenctIndex.value = index;
};
const handleQuickBuy = () => {
  showSuccessToast.value = true
};
</script>

<template>
  <div class="pickPage">
    <DetailHeader :title="'每次精选3'" :isNeedBackIcon="true"/>
    <div class="topTimeSelect">
      <div
        class="timeItem"
        :class="{ active: index === currenctIndex }"
        v-for="(el, index) in new Array(16)"
        @click="handleTime(index)"
      >
        上午 8:40
      </div>
    </div>
    <div class="inputNumber">
      <div class="serialNumber width1">
        <div class="title">编号</div>
        <div class="fillInBox">
          <input type="number" />
          <input type="number" />
          <input type="number" />
        </div>
        <div class="addShopping">添加到购物车</div>
      </div>
      <div class="serialNumber">
        <div class="title">数量</div>
        <div class="fillInBox">
          <input type="number" />
        </div>
        <div class="addShopping">盒子</div>
      </div>
    </div>
    <div class="shoppingCart">
      <div class="shoppingInfo">
        <div class="top">
          <div>购物车(21)</div>
          <Iconfont name="icon-icon_gouwuche" color="#FFF" size="20" />
        </div>
      </div>
      <div class="cartTable">
        <div class="tableTitle">
          <div class="width1">数量</div>
          <div class="width2">开奖时间</div>
          <div class="width3">总价</div>
          <div class="width4">数量</div>
        </div>
        <div class="tableItem" v-for="(el, index) in new Array(3)" :key="index">
          <div class="width1">111</div>
          <div class="width2">上午 8:40</div>
          <div class="width3">7.0</div>
          <div class="width4 numberInfo">
            <div class="leftNum">
              <div>
                <Iconfont name="icon-icon_jian" color="#A4ACC1" size="12" />
              </div>
              <div class="num">1</div>
              <div>
                <Iconfont name="icon-icon_jia" color="#FF2D55" size="12" />
              </div>
            </div>
            <Iconfont name="icon-icon_delete" color="#FF2D55" size="16" />
          </div>
        </div>
      </div>
    </div>
    <div class="collapseContainer">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="如何取胜？" name="1">
          <div class="rewardStructure">奖励结构</div>
          <div class="rewardTable">
            <div class="tableTitle">
              <div class="width1">奖项类别</div>
              <div class="width2">奖品详情</div>
              <div class="width3">奖金金额</div>
            </div>
            <div class="tableBody">
              <div
                class="tableItem"
                v-for="(el, index) in new Array(4)"
                :key="index"
              >
                <div class="width1">一</div>
                <div class="width2">匹配所有3个数字</div>
                <div class="width3">3000.0</div>
              </div>
            </div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="怎么玩？" name="2">
          <div>每天有 72 次抽奖，每 20 分钟抽奖一次。</div>
          <div>
            同时，我们还免除所有在线购买那加兰邦彩票的中奖者的所有税费。
          </div>
        </van-collapse-item>
        <van-collapse-item title="如何查看成绩并领取奖金？" name="3">
          <div>点击“我的彩票”，在“中奖”中，您可以找到并领取您的中奖彩票。</div>
          <div>在“待开奖”中，您可以找到尚未开奖的彩票。</div>
          <div>在“抽奖”中，您可以找到已抽奖的彩票。</div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="buyQuickly">
      <div class="leftInfo">
        <div class="tickets">
          <div>门票:11张</div>
          <div>₹ 25766.0</div>
        </div>
        <div class="balance">
          <div>余额:</div>
          <div>₹ 10007372.0</div>
        </div>
      </div>
      <div class="rightBuy" @click="handleQuickBuy">快速购买</div>
    </div>
    <van-dialog v-model:show="showSuccessToast" title="" show-cancel-button confirmButtonText="查看订单">
        <div class="paySuccess">
            <div>支付成功</div>
            <img :src="images.successImg" alt="">
        </div>
    </van-dialog>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
